<template xmlns:v="http://www.w3.org/1999/html">
  <el-card class="mt15 mb15">
    <!-- 第一行——操作按钮 -->
    <div class="filter-container"><el-button type="primary" icon="el-icon-document-add" @click="editShow('新增',null)">添加</el-button></div>
    <!-- / 第一行——操作按钮 -->

    <!-- table表格 -->
    <el-table :data="list" :stripe="true" style="width: 100%">
      <el-table-column align="center" prop="roleCode" label="角色编码">
        <template slot-scope="{ row }">
          {{ row.roleCode ? row.roleCode : '-' }}
        </template>
      </el-table-column>
        <el-table-column align="center" prop="roleName" label="角色名称">
          <template slot-scope="{ row }">
            {{ row.roleName ? row.roleName : '-' }}
          </template>
        </el-table-column>

      <el-table-column align="center" prop="sysFlag_dictText" label="类型">
        <template slot-scope="{ row }">
          {{ row.sysFlag_dictText ? row.sysFlag_dictText : '-' }}
        </template>
      </el-table-column>



      <el-table-column align="center" prop="roleName" label="创建时间">
        <template slot-scope="{ row }">
          {{ row.createTime ? row.createTime : '-' }}
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" align="center" width="350px" >
        <template slot-scope="{ row, $index }"  v-if="'enterprise'!=row.roleCode" >
          <el-button type="text"  v-if="0==row.sysFlag" @click="editShow('修改',row)">编辑</el-button>
          <el-button type="text" @click="editRoleUserListShow(row.id, $index)">已选用户</el-button>
          <el-button type="text" @click="editUserListShow(row.id, $index)">添加用户</el-button>
          <el-button type="text" v-if="0==row.sysFlag" @click="delItem(row, $index)">删除</el-button>
          <el-button type="text"  @click="menuShow(row.id)">授权</el-button>

          <!-- <el-button type="text" @click="topItem(row)">置顶</el-button> -->
        </template>
      </el-table-column>
      <!-- / 操作 -->
    </el-table>
    <!-- / table表格 -->

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      next-text="下一页"
      layout="prev, pager, next, jumper"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @current-change="currentChange"
      @pagination="getList"
    />
    <!-- / 分页 -->
    <!--    <edit-drawer ref="importInformation" @refresh="refresh" />-->
    <!--   -->

    <edit ref="edit" @refresh="refresh" />
    <roleUserList ref="roleUserList"  />
    <userList ref="userList"  />
    <sys_menu ref="menu"  />


  </el-card>
</template>

<script>
// import { fetchList } from "@/api/article";

import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import edit from './components/edit'
import roleUserList from './components/role_user_list'
import userList from './components/user_list'
import sys_menu from './components/menu'

import { sys_role_list,sys_role_delete} from '@/api/sys_role'

export default {
  components: { Pagination, edit,roleUserList,userList,sys_menu},

  data() {
    return {
      total: 0,

      list: [],
      // 新增弹出框
      dialogVisible: false, // 弹出框的显示与隐藏
      listLoading: true,
      //
      //column=createTime&order=desc&field=id,,roleCode,roleName,createTime,action&pageNo=1&pageSize=10
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        column: "createTime",
        order: "desc"
        // type:"default",
        //  sort: false
      }
    }
  },
  created() {

    this.getList()
  },
  methods: {

    // table表格事件
    indexMethod(index) {
      return index * 2
    },
    editShow(id,rowData) {
      // console.log("the blockId is=======>:"+this.blockId);
      this.$refs.edit.show(id, rowData)
    },
    editRoleUserListShow(id) {
      this.$refs.roleUserList.show(id)
    },

    editUserListShow(id) {

      //console.log("editUserListShow===22====>:");
      this.$refs.userList.show(id)
    },

    menuShow(id) {

      console.log("menuShow===22====>:");
      this.$refs.menu.show(id)
    },




    // 列表
    getList() {
      this.listLoading = true

      sys_role_list(this.listQuery).then(response => {
        let list=response.result.records;
        for(let i=0;i<list.length;i++){
            let e=list[i];
            if('enterprise'==e.roleCode||'admin'==e.roleCode){
                e.sysFlag=1;//系统内置
                e.sysFlag_dictText="系统内置";
            }else{
               e.sysFlag=0;//
               e.sysFlag_dictText="自定义";
            }
        }//end of for
        this.list = list
        // this.total = 1;
        this.total = response.result.total
        this.listLoading = false
      })
    },
    refresh() {
      this.getList()
    },


    // 删除
    delItem(e, index) {

      let p= {
          params: {	// 请求参数拼接在url上
            id: e.id
          }
      };

      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          sys_role_delete(p).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.refresh()
          })
          // this.list.splice(index, 1)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    currentChange(e) {
      console.log(e)
    },
    // 弹出框---分页点击事件
    handleSizeChange() {},
    handleCurrentChange() {},

    // ---------------------------

    // 外部分页 -- 搜索
    handleFilter() {}
  }
}
</script>
<style lang="scss" scoped></style>
